<template>
    <!-- pages/maker/makerequities/index.wxml -->
    <view>
        <van-tabs
            :active="active"
            @change="onChange"
            title-active-color="#333333"
            title-inactive-color="#999999"
            nav-class="nav-class"
            custom-class="custom-class"
            :ellipsis="false"
        >
            <van-tab :title="item.title" data-id="item.id" v-if="item.id != 8" v-for="(item, index) in equitiesList" :key="index">
                <view class="box" @touchstart="touchStart" @touchend="touchEnd">
                    <view class="centers">
                        <image class="icon-88 mr-20" :src="imgUrl + 'maker-eq' + item.id + '.png'"></image>
                        <text>{{ item.title }}</text>
                    </view>
                    <view class="mt-40">
                        <view class="title">获取方式</view>
                        <text class="details mt-10">{{ item.getmethod }}</text>
                    </view>
                    <view class="mt-40">
                        <view class="title">权益说明</view>
                        <text class="details mt-10">{{ item.content }}</text>
                    </view>
                </view>
            </van-tab>
        </van-tabs>
        <view class="detailsbtn">
            <text>点击查看详细</text>
            <text class="t-c" @tap="onRlue">《创客卡规则》</text>
        </view>
    </view>
</template>

<script>
// pages/maker/makerequities/index.js
const app = getApp(); // 引入app

import _request from '../../../utils/request.js';
import { getTime, getTouchData, toDecimal2 } from '../../../utils/util.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            equitiesList: [],
            endX: '',
            endY: '',
            startX: '',
            startY: '',
            active: 0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        this.setData({
            active: Number(options.id)
        }); // 权益

        _request.get('/maker/getEquityStatementInfo', {}).then((res) => {
            this.setData({
                equitiesList: res.data.data
            });
        });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 查看规则
        onRlue() {
            uni.navigateTo({
                url: '/pages/maker/makerdetails/makerrule/index'
            });
        },

        // 开始滑动
        touchStart(e) {
            this.setData({
                startX: e.changedTouches[0].clientX,
                startY: e.changedTouches[0].clientY
            });
        },

        // 结束滑动
        touchEnd(e) {
            let x = e.changedTouches[0].clientX;
            let y = e.changedTouches[0].clientY;
            const { startX, startY, active } = this; // active为0和9不允许滑动

            if (getTouchData(x, y, startX, startY) == 'right' && active != 0) {
                this.setData({
                    active: active - 1
                });
            } else if (getTouchData(x, y, startX, startY) == 'left' && active != 9) {
                this.setData({
                    active: active + 1
                });
            }
        },

        onChange() {
            console.log('占位：函数 onChange 未声明');
        }
    }
};
</script>
<style>
/* pages/maker/makerequities/index.wxss */
.box {
    width: 710rpx;
    height: 800rpx;
    background: #ffffff;
    box-shadow: 0px 2px 4px 0px rgba(232, 232, 232, 0.48), 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin: 40rpx auto;
    padding: 40rpx 30rpx;
    box-sizing: border-box;
}

.title {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 40rpx;
}

.details {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
}

/* 组件样式 */
.van-tabs__nav,
.custom-class,
.van-tabs__scroll--line {
    background: #fbfbfb !important;
}

.van-tab--active {
    font-size: 32rpx !important;
}

.van-tabs__line {
    background: #ff8722 !important;
}

.van-ellipsis {
    flex-basis: 1 !important;
}

.van-tab {
    height: 100%;
}

/* 查看详情 */
.detailsbtn {
    width: 100%;
    text-align: center;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666;
    line-height: 40rpx;
}

.t-c {
    color: #ff8722;
}
</style>
